<template>
  <view class="con">
    <view class="main">
      <view class="titleBox" @click="goPage('/pages/myPage/setting/editPage')">
        <image class="avatar" :src="userInfo?.avatar" mode="aspectFill" />
        <view>
          <view class="info">
            <view class="title">
              {{ userInfo?.nickName || "1313" }}
            </view>
            <view class="hyBox" v-if="userInfo?.level !== '0'">VIP</view>
            <view class="hyBox1" v-else> VIP</view>
          </view>
          <view class="sub"> {{ userInfo?.vipValidDate || "您还不是会员用户" }}</view>
        </view>
      </view>
      <view v-if="platShow" :class="{ vipBox: true, ptvip: userInfo?.level === '1' || userInfo?.level === '0', hjvip: userInfo?.level === '2', bjvip: userInfo?.level === '3' }">
        <view class="vipt">
          <view class="left">
            <view class="t">{{ levelInfo[userInfo?.level] || "开通VIP" }}</view>
            <view class="b" v-if="userInfo?.level === '0' || userInfo?.level === '1'"
              >{{ userInfo?.level === "1" ? "升级会员特权" : "解锁会员特权" }} <u-icon name="arrow-right" style="margin-left: 15rpx; margin-top: 6rpx" bold color="#fff"></u-icon>
            </view>
            <view class="b" @click="goPage('/pages/myPage/openMembership')" v-if="userInfo?.level === '2'"
              >升级会员特权 <u-icon name="arrow-right" style="margin-left: 15rpx; margin-top: 6rpx" bold color="#612800"></u-icon>
            </view>
            <view class="b" @click="goPage('/pages/myPage/openMembership')" v-if="userInfo?.level === '3'"
              >更多会员特权 <u-icon name="arrow-right" style="margin-left: 15rpx; margin-top: 6rpx" bold color="#103967"></u-icon>
            </view>
          </view>
          <view class="right" @click="goPage('/pages/myPage/openMembership')"> {{ userInfo?.level !== "0" ? "续费" : "去解锁" }} </view>
        </view>
        <view class="vipb"> 会员超值购！ VIP低价抢购中 <u-icon name="arrow-right" style="margin-top: 3rpx" size="14" bold color="#000000"></u-icon></view>
      </view>
      <view class="spaceBox">
        <view class="left">
          <view class="lt">
            <view>{{ userInfo?.spaceSizeStr }}/{{ userInfo?.totalSpaceSizeStr }}</view>
            <view class="r">{{ 100 - userInfo?.spaceUsedRate * 100 }}%</view>
          </view>
          <u-line-progress :percentage="100 - userInfo?.spaceUsedRate * 100" :showText="false" activeColor="#3b70fd" height="8"></u-line-progress>
          <view class="lb">剩余空间</view>
        </view>
        <view class="right" @click="goPage('/pages/myPage/myFavorites')">
          <u-icon name="heart" bold size="30" color="#333333"></u-icon>
          <view class="text">我的收藏</view>
        </view>
      </view>
      <view class="commonBox" style="margin-top: 20rpx">
        <CommonTitle title="常用工具" />
        <u-cell-group :border="false">
          <u-cell v-if="platShow" :border="false" title="购买记录" isLink @click="goPage('/pages/myPage/buyRecords')">
            <template #icon><image class="toolIcon" src="../../static/my/gmjl.png" mode="aspectFill" /></template>
          </u-cell>
          <u-cell :border="false" title="联系客服" isLink @click="goPhone">
            <template #icon><image class="toolIcon" src="../../static/my/lxkf.png" mode="aspectFill" /></template>
          </u-cell>
          <!-- <view class="lxkf">
            <u-button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></u-button>
          </view> -->
          <u-cell :border="false" title="系统设置" isLink @click="goPage('/pages/myPage/setting/setting')">
            <template #icon><image class="toolIcon" src="../../static/my/xtsz.png" mode="aspectFill" /></template>
          </u-cell>
          <!-- <u-cell :border="false" title="意见反馈" isLink @click="goPage('/pages/myPage/feedback')">
            <template #icon><image class="toolIcon" src="../../static/my/yjfk.png" mode="aspectFill" /></template>
          </u-cell> -->
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonTitle from "@/components/commonTitle.vue";
import { goPage } from "@/utils/commonFn";
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { configKey, getUserInfo } from "@/api/my";
const lxPhone = ref("");
const userInfo = ref<any>();
const levelInfo: any = {
  "1": "白银会员",
  "2": "黄金会员",
  "3": "白金会员",
};
const platShow = ref(true);
onMounted(async () => {
  const res = await configKey("customer_service_number");
  const res1 = await configKey("ios_pay_switch");
  lxPhone.value = res.data;
  uni.getSystemInfoAsync({
    success: (res) => {
      console.log(res.platform);
      if (res.platform === "ios" && res1.data === "false") {
        platShow.value = false;
      } else {
        platShow.value = true;
      }
    },
  });
});
onShow(async () => {
  const res = await getUserInfo();
  uni.setStorageSync("userInfo", res.data);
  userInfo.value = res.data;
});
const goPhone = () => {
  uni.makePhoneCall({
    phoneNumber: lxPhone.value,
  });
};
</script>

<style lang="less" scoped>
.con {
  background: #e8ebf4;
  min-height: 100vh;
  padding-top: 80rpx;
}
.titleBox {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  .avatar {
    width: 128rpx;
    height: 128rpx;
    background: #add69b;
    border-radius: 50%;
    margin-right: 20rpx;
    border: 2rpx solid #fff;
  }
  .info {
    display: flex;
    align-items: center;
    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1e1e1e;
      display: flex;
      align-items: center;
    }
    .hyBox,
    .hyBox1 {
      width: 55rpx;
      background: linear-gradient(90deg, #fddf9e 0%, #ffd274 100%);
      border-radius: 20rpx;
      font-size: 18rpx;
      color: #14041c;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 15rpx;
    }
    .hyBox1 {
      background: #c1c2c6;
      color: #fff;
    }
  }
  .sub {
    font-size: 24rpx;
    color: #767676;
    margin-top: 10rpx;
  }
}
.vipBox {
  margin-top: 52rpx;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  .vipt {
    padding: 38rpx 50rpx;
    display: flex;
    justify-content: space-between;
    color: #fff;
    .left {
      .t {
        font-size: 40rpx;
        color: #ffffff;
        font-weight: bold;
      }
      .b {
        margin-top: 62rpx;
        display: flex;
        align-items: center;
      }
    }
    .right {
      background: linear-gradient(90deg, #fbbcaa 0%, #ffeabd 100%);
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #612800;
      width: 144rpx;
      height: 68rpx;
      text-align: center;
      line-height: 68rpx;
      font-weight: bold;
    }
  }
  .vipb {
    background: linear-gradient(-90deg, #ffffff 4%, #e9efff 100%);
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    display: flex;
    align-items: center;
    padding: 16rpx 50rpx;
    font-size: 24rpx;
    color: #000000;
  }
}
.ptvip {
  background: linear-gradient(125deg, #62666b 0%, #bac5e5 100%);
}
.hjvip {
  background: linear-gradient(125deg, #fee39c 0%, #fdae91 100%);
  .t,
  .b {
    color: #612800 !important;
  }
}
.bjvip {
  background: linear-gradient(125deg, #deecf7 0%, #387fd2 100%);
  .t,
  .b {
    color: #103967 !important;
  }
}
/deep/ .u-cell__body {
  width: 100%;
  padding: 25rpx 0px !important;
}
.toolIcon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx !important;
}
.lxkf {
  /deep/.u-reset-button {
    border: none !important;
    position: absolute !important;
    left: 0;
    top: 134px;
    background: rgba(0, 0, 0, 0) !important;
  }
}
.spaceBox {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  .left {
    box-sizing: border-box;
    width: 72%;
    background: #ffffff;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    padding: 20rpx 46rpx;
    .lt {
      font-size: 28rpx;
      color: #3d3d3d;
      display: flex;
      justify-content: space-between;
      margin-bottom: 12rpx;
      .r {
        font-size: 26rpx;
        color: #aaaaaa;
      }
    }
    .lb {
      font-size: 28rpx;
      color: #3d3d3d;
      margin-top: 16rpx;
    }
  }
  .right {
    box-sizing: border-box;
    width: 25%;
    padding: 26rpx;
    background: #ffffff;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    .text {
      margin-top: 12rpx;
    }
  }
}
</style>
